<template>
    <h2 style="text-align: center;">科室列表</h2>
    <a href="/AddDept" class="btn btn-success">添加科室信息</a><br>
    科室名称:<input type="text" placeholder="请输入科室名称" v-model="name" style="margin-right: 10px;" />
    <input type="button" value="查询" class="btn btn-success" @click="ShowDept" />
    <table border="1" class="table table-bordered">
        <thead style="background-color: aquamarine;">
            <tr style="text-align: center;">
                <th>科室编号</th>
                <th>科室图片</th>
                <th>科室名称</th>
                <th>成立时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody style="text-align: center;">
            <tr v-for="item in Info">
                <td>{{ item.Dept_Id }}</td>
                <td><img :src="item.Dept_Img"  style="width: 100px;height: 100px;"/></td>
                <td>{{ item.Dept_Name }}</td>
                <td>{{ item.Dept_CreateTime.substring(0,10) }}</td>
                <td>操作</td>
            </tr>
        </tbody>
    </table>
</template>



<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';

    //响应性数据
    const Info=ref([{
        Dept_Id: 0,
        Dept_Name: "",
        Dept_Img: "",
        Dept_CreateTime: ""
    }])
    onMounted(()=>{
        ShowDept();//显示
    })

    //显示
    const name=ref("");
    const ShowDept=()=>{
        axios.get("https://localhost:44339/api/Dept/ShowDept",
            {
                params:{
                    name:name.value,
                }
            }
        )
        .then(res=>{
            Info.value=res.data
        })
    }
</script>